<template>
    <el-container class="layout-container-demo" style="height: 100vh">
        <el-aside :width="isCollapse ? '60px' : '200px'">
            <el-scrollbar>
                <el-menu :collapse=isCollapse>
                    <el-menu-item style="border-bottom: 1px solid #cccccc;height: 8vh">
                        <ElementPlus style="width: 20px"></ElementPlus>
                        <span style="font-weight: bold;font-style: italic;">&nbsp;&nbsp;&nbsp;BoYa Education</span>
                    </el-menu-item>
                    <template v-for="menuItem in menuItems" :key="menuItem.id">
                        <el-sub-menu :index="menuItem.id.toString()">
                            <template #title>
                                <el-icon>
                                    <component :is="menuItem.icon" style="width: 20px" />
                                </el-icon>
                                <span>{{ menuItem.menuname }}</span>
                            </template>
                            <el-menu-item v-for="childMenu in menuItem.children"
                                          :key="childMenu.id"
                                          :index="childMenu.id.toString()"
                                          @click="toRouter(childMenu.target)">
                                <el-icon>
                                    <component :is="childMenu.icon" style="width: 20px" />
                                </el-icon>
                                <span>{{ childMenu.menuname }}</span>
                            </el-menu-item>
                        </el-sub-menu>
                    </template>
                </el-menu>
            </el-scrollbar>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 20px">
                <div>
                    <el-icon><Expand @click="isC" v-show="block"/></el-icon>
                    <el-icon><Fold @click="isC" v-show="toggle"/></el-icon>
                </div>
                <div class="toolbar">
                   
                    
                        <el-dropdown>
                            <el-button  type="success" text>
                        <el-icon size="30"><Flag /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="joinPre">预报名</el-dropdown-item>
                                <!-- <el-dropdown-item @click="joinUs">报名</el-dropdown-item> -->
                              
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <el-dropdown>
                        <el-avatar
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                        />
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="exit">退出系统</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>

            <el-main>
                <el-scrollbar>
                    <router-view />
                </el-scrollbar>
            </el-main>
        </el-container>
          <!-- el-dialog 新增-->
          <el-drawer
    v-model="showJoinPage"
   size="40%"
    :direction="direction"
    :before-close="handleClose"
  >
 
    <template #title>
      <div style="display: flex; justify-content: center; align-items: center; height: 100%;">
        <div style="font-size: 25px; color: rgb(4, 4, 4) font-weight: bold;">
          预报名学生信息录入
        </div>
      </div>
    </template>
   <el-form
   ref="ruleForms"
    :model="ruleForm"
    :rules="rules"
    label-width="120px"
    class="demo-ruleForm"
    :inline="true"
    status-icon
  >
    <el-form-item label="姓名"  prop="name" >
      <el-input v-model="ruleForm.name"  placeholder="请输入专业名称 " />
    </el-form-item>
    <el-form-item label="性别"  prop="sex" >
      <el-input v-model="ruleForm.sex"  placeholder="请输入性别 " />
    </el-form-item>
    <el-form-item label="年龄"  prop="age" >
      <el-input v-model.number="ruleForm.age" placeholder="请输入年龄 " />
    </el-form-item>
    <el-form-item label="学校"  prop="school" >
      <el-input v-model="ruleForm.school"  placeholder="请输入学校 " />
    </el-form-item>
    <el-form-item label="家长电话"  prop="telephone" >
      <el-input v-model.number="ruleForm.telephone"  placeholder="请输入家长电话" />
    </el-form-item>
    <el-form-item label="是否在读" prop="status">
      <el-radio-group v-model="ruleForm.status">
        <el-radio :label="true" border >是</el-radio>
      <el-radio :label="false" border>否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="备注"  prop="note"  >
    <el-input v-model="ruleForm.note" style="width: 400px;"   placeholder="可在此处添加备注信息哦"  />
     </el-form-item>
     
  

    
   

 
 
 <el-row type="flex" justify="center">
	   
    <el-form-item >
        <el-button @click="showJoinPage=false">取消</el-button>
      <el-button type="primary" @click="submitForm()">
        确认
      </el-button>

    </el-form-item>
 </el-row>
  </el-form>

  

</el-drawer>
    </el-container>

    
</template>

<script>
import { ref,reactive,toRefs,nextTick } from 'vue';
import { useRouter } from 'vue-router';
import {
    Message,
    Setting,
    Document,
    Memo,
    Reading,
    Star,
    User,
    Postcard,
    School,
    List,
    ElementPlus,
    Flag,
    Ticket,
    Platform,
    Expand, Fold
} from '@element-plus/icons-vue';
import {getExit} from "../services/api/login.js";
import {ElMessageBox, ElNotification} from "element-plus";
import {useStore} from "vuex";

import {getStudent,createStudent} from "../services/api/student.js";
export default {
    components: {
        Fold,
        Expand,
        Setting,
        Message,
        Document,
        Memo,
        Reading,
        Star,
        User,
        Postcard,
        School,
        List,
        ElementPlus,
        Flag,
        Ticket,
        Platform
    },
    setup() {
        const router = useRouter();
        const isCollapse = ref(false)
        const block = ref(true)
        const toggle = ref(false)
        const ruleForms = ref(null); 
        const ruleForm = reactive({
          
          name: '',
          age: '',
          school: '',
          sex:'',
          telephone: '',
          status:false ,
          note:'',
        })
        const menuItems = ref([
            // 后端返回的菜单数据
        ]);
        const rules = reactive({
          name: [
            { required: true, message: '请输入学生姓名', trigger: 'blur' },
            { min: 2, max: 10, message: '长度2到10个字符', trigger: 'blur' },
          ],
          sex: [
            { required: true, message: '请输入学生性别', trigger: 'blur' },
            { min: 1, max: 2, message: '长度1到2个字符', trigger: 'blur' },
          ],
          age: [
          {
            type: "number",
            required: true,
            message: "请输入学生年龄",
            trigger: "blur",
          },
        ],
        telephone: [
          {
            type: "number",
            message: "请输入家长手机号码",
            trigger: "blur",
          },
        ],
        school: [
            { required: true, message: '请输入学生所在学校', trigger: 'blur' },
            { min: 2, max: 20, message: '长度2到20个字符', trigger: 'blur' },
          ],
          status: [
            {
              required: true,
              message: 'Please pick a option',
              trigger: 'change',
            },
          ],
          note: [
            {
              message: 'Please select activity resource',
              trigger: 'blur',
            },
          ],
      
        
        })
        const store = useStore();
        const getSysMenu = () =>{
            const routeStudent='/student'
            menuItems.value = JSON.parse(localStorage.getItem("menu"))
            // menuItems.value[0].target.value=routeStudent
  
        }
        const toRouter = (toPath) =>{
            router.push(toPath)
        }
        const  isC = () => {
            isCollapse.value = !isCollapse.value;
            toggle.value = !toggle.value;
            block.value = !block.value;
        }
        const exit = () =>{
            ElMessageBox.confirm(
                '确认退出?',
                'Warning',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    getExit().then(
                        res=>{
                            if (res.data.code === 200){
                                router.push("/")
                                store.commit('exit');
                                ElNotification({
                                    title: 'exit',
                                    type: 'success',
                                    message: 'Exit completed',
                                })
                            }
                        }
                    )
                })
                .catch(() => {
                    ElNotification({
                        title: 'exit',
                        type: 'info',
                        message: 'Exit canceled',
                    })
                })
        }
        const joinUs=()=>{
            router.push({
					path: '/course',
					query: {
                        showAddPage:true
					}
				})
        
        }
        const showJoinPage=ref(false)
        const joinPre=()=>{
            router.push({
					path: '/home',
					query: {
                        showJoinPage:true
					}
				})
                showJoinPage.value=true
        }
       // 新增学生
     const submitForm= ()=>{
        ruleForms.value.validate((valid) => {
        if (valid) {
            ruleForm.telephone= ruleForm.telephone.toString()
            createStudent(ruleForm).then((res)=>{
            const { name } = toRefs(ruleForm); 
                              if(res.data.code === 200){
                                showJoinPage.value=false

                                  nextTick(() => {
                                      ruleForms.value.resetFields();
                                                  });  
                                  ElNotification({
                                    title: 'Success',
                                    message: `${name.value}信息录入成功`,
                                    type: 'success',
                                      })
  
                        }else{
                                    ElNotification({
                                      title: 'Error',
                                      message: `${name.value}信息录入失败`,
                                      type: 'error',
                          })
                        }
                  })

        }})
      
      }
        getSysMenu()

        return {
            menuItems,
            toRouter,
            isCollapse,
            block,
            toggle,
            isC,
            exit,
            joinUs,
            joinPre,
            showJoinPage,
            ruleForm,
            rules,
            submitForm,
            ruleForms
        };
    }
};
</script>

<style scoped>
.layout-container-demo .el-header {
    position: relative;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content:space-between;
    --el-header-padding: 20px;
    height: 8vh;
}
.layout-container-demo .el-aside {
    background-color: white;
    transition: width 0.3s;
}
.layout-container-demo .el-menu {
    border-right: none;
}
.layout-container-demo .el-main {
    padding: 5px;
    background-color: #cccccc;
}

.layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
